/* eslint-disable @typescript-eslint/ban-types */
<template>
    <div class="container">
        <div class="block">
            <div class="block-box">
                <div class="row">
                    <div class="name">
                        <!-- <span class="important">*</span> -->
                        上传受伤者视频
                    </div>
                    <div class="upload-box" style="width:100%">
                        <!-- <uploadVideo v-model:file-list="fileList" /> -->
                        <el-upload class="upload-demo" :action="uploadAction" :headers="{ Authorization }"
                            :on-success="fileSuccess" :on-error="fileEerror" :show-file-list="true"
                            :file-list="fileList" :limit="3" :on-remove="fileRemove" accept=".mp4">
                            <button class="btn-white-blue" style="width:130px;background:#1989FA;color:#fff;">
                                <i class="el-icon el-icon-camera" />选择视频文件
                            </button>
                        </el-upload>
                        <div class="upload-introduce">
                            视频时间10s-60s 视频大小不超50M
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="name">
                        <span class="important">*</span>
                        出险人
                    </div>
                    <el-select v-model="outDangerUserId" filterable placeholder="选择出险人" class="screen-i search-type"
                        @change="onChangeSelect">
                        <el-option v-for="(item, index) in userList" v-bind:key="index" :label="item.userName +
                            ' ' +
                            '(' +
                            item.idCardNo.slice(14, 18) +
                            ')' +
                            '          ' +
                            '投保时间' +
                            item.createTime
                            " :value="item.id" />
                    </el-select>
                </div>
                <div class="row">
                    <div class="name">
                        <span class="important">*</span>
                        出险人电话
                    </div>
                    <el-input placeholder="请输入出险人电话" v-model="outDangerPhone" />
                </div>
                <div class="row">
                    <div class="name">
                        <span class="important">*</span>
                        出险时间
                    </div>
                    <el-date-picker @change="onChangeDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                        style="width:100%" v-model="date" type="date" placeholder="请选择出险时间"
                        :disabled-date="handleDisableDate" />
                </div>
                <div class="row">
                    <div class="name">
                        <span class="important">*</span>
                        事故类型
                    </div>
                    <div style="width:100%">
                        <el-radio v-model="accidentType" label="2" size="large">工伤</el-radio>
                        <el-radio v-model="accidentType" label="1" size="large">意外</el-radio>
                    </div>
                </div>
                <div class="row">
                    <div class="name">
                        <span class="important">*</span>
                        是否有骨折
                    </div>
                    <div style="width:100%">
                        <el-radio v-model="hurtStatus" label="1" size="large">是</el-radio>
                        <el-radio v-model="hurtStatus" label="2" size="large">不是</el-radio>
                    </div>
                </div>
                <div class="row">
                    <div class="name">
                        <span class="important">*</span>
                        出险省市区
                    </div>
                    <el-cascader style="width:100%" placeholder="请选择省市区" :options="areaList" v-model="area">
                    </el-cascader>
                </div>
                <div class="row">
                    <div class="name">
                        <span class="important">*</span>
                        出险地点
                    </div>
                    <el-input placeholder="请输入出险地点，如xx公司xx车间" v-model="place" />
                </div>
                <div class="row">
                    <div class="name">
                        <span class="important">*</span>
                        就诊医院
                    </div>
                    <el-input placeholder="如：昆山市第一人民医院" v-model="visitHospital" />
                </div>
                <div class="row">
                    <div class="name">
                        <span class="important">*</span>
                        详细事故经过
                    </div>
                    <el-input type="textarea" placeholder="请输入详细事故经过" v-model="after" />
                </div>
                <div class="row">
                    <div class="name">
                        <span class="important">*</span>
                        报案人电话
                    </div>
                    <el-input placeholder="请输入报案人电话" v-model="phone" />
                </div>
                <div class="row row-alone">
                    <div></div>
                    <button class="btn" @click="onModifyCode">提交</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup></script>
<script lang="ts">
import { createInsureCase, insureUserGuarantee } from '@/api/insure-deduction'
import { defineComponent } from 'vue'
import global from '@/utils/global'
import { dateFormat } from '@/utils/util'
import uploadVideo from '@/components/upload-video/index.vue'
import dayjs from 'dayjs'
import { pcaTextArr } from 'element-china-area-data'
export default defineComponent({
    name: 'InsureTeamReportAdd',
    components: {
        uploadVideo
    },
    created() {
        this.getInsureUserGuarantee()
    },
    data() {
        return {
            areaList: [],
            area: [],
            Authorization: 'Bearer' + ' ' + global.token,
            uploadAction:
                process.env.VUE_APP_BASE_URL +
                '/rest/period-insur/insur-period-report-case/upload', // 上传路径
            searchType: '',
            date: '',
            place: '',
            after: '',
            phone: '',
            accidentType: '2',
            hurtStatus: '1',
            fileSize: '',
            fileUrl: '',
            isfileLengt: true,
            outDangerPhone: '',
            outDangerUserId: '',
            outDangerUserName: '',
            userList: [] as any,
            fileList: [] as any,
            idCardNo: '',
            visitHospital: '', // 就诊医院
            userId: '',
            tbdate: ''
        }
    },
    mounted() {
        this.areaList = pcaTextArr as any
    },
    methods: {
        handleDisableDate(time: any) {
            console.log(this.tbdate, 'huagfuhyffh')
            console.log(time, '111')

            if (!this.tbdate) {
                return true
            } else {
                const date = dayjs(this.tbdate)
                const nextDay: any = date.add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
                const previousDate = date
                    .subtract(1, 'day')
                    .format('YYYY-MM-DD HH:mm:ss')
                let start = new Date(previousDate).getTime()
                let end = new Date(nextDay).getTime()
                return !(
                    new Date(time).getTime() >= start && new Date(time).getTime() < end
                )
            }
        },
        // 选择出险人
        onChangeSelect(event: any) {
            const obj = this.userList.filter((item: any) => item.id === event)[0]
            console.log(obj, '触发了')
            this.outDangerPhone = obj.phone
            this.idCardNo = obj.idCardNo
            this.userId = obj.userId
            this.tbdate = obj.createTime
            console.log(this.userId, 'this.userId = obj.userId')
        },
        // 选择时间
        onChangeDate(date: string) {
            console.log(date, 'date')
            this.getInsureUserGuarantee()
        },
        // 出险人列表
        async getInsureUserGuarantee() {
            const result = await insureUserGuarantee({
                insureCompanyType: 'insure_type_tyrb',
                insureDay: '',
                isQueryOutDanger: 1
            })
            console.log(result, 'result')
            this.userList = result.list
        },
        // fileBeforeUpload (file:any) {},
        async fileSuccess(
            response: {
                code: number;
                msg: string;
                data: { fileSize: string; fileUrl: string };
            },
            file: any,
            fileList: any
        ) {
            var url = URL.createObjectURL(fileList[fileList.length - 1].raw)
            var audioElement = new Audio(url)
            var duration = parseInt(audioElement.duration + '')
            await audioElement.addEventListener('loadedmetadata', () => {
                console.log(parseInt(audioElement.duration + ''), '时长为秒，取整') // 时长为秒，取整
                const fileLength = parseInt(audioElement.duration + '')
                if (fileList.length > 3) {
                    this.$message.error('最多上传三个视频')
                    return
                }
                if (fileLength < 10 && fileLength > 100) {
                    this.$message.error('视频不可小于10秒或大于100秒')
                    this.isfileLengt = false
                    return
                }
                if (file.size / 1024 / 1024 > 50) {
                    this.$message.error('视频不可大于50M')
                    this.isfileLengt = false
                    return
                }
                if (response.code === 500) {
                    this.$message.error(response.msg)
                    return
                }
                if (file.raw.type !== 'video/mp4') {
                    this.$message.error('请上传视频')
                    return
                }
                console.log(file, 'file')
                this.fileList.push({
                    name: file.raw.name,
                    url: response.data.fileUrl,
                    fileSize: response.data.fileSize,
                    fileType: 'video',
                    fileUrl: response.data.fileUrl,
                    id: new Date().getTime()
                })
                this.$message.success('上传成功')
                console.log(this.fileList, 'fileList文件列表')
            })
        },
        fileEerror() {
            this.$message.error('文件上传失败')
        },
        // 删除文件
        fileRemove(file: any, uploadFiles: any) {
            console.log(file, uploadFiles, 'uploadFiles')
            this.fileList = this.fileList.filter(
                (item: { id: number }) => item.id !== file.id
            )
        },
        // 提交
        async onModifyCode() {
            console.log(this.fileList, 'fileList')
            const userInfo = this.userList.filter(
                (item: { id: string }) => item.id === this.outDangerUserId
            )
            console.log(userInfo, 'userInfo')
            if (this.fileList.length === 0) {
                this.$message.error('请至少上传一个视频')
                return
            }
            if (!this.outDangerUserId) {
                this.$message.error('请选择出险人')
                return
            }
            if (!this.outDangerPhone) {
                this.$message.error('请输入出险人电话')
                return
            }
            if (!this.date) {
                this.$message.error('请选择日期')
                return
            }
            if (this.area.length === 0) {
                this.$message.error('请输入出险省市区')
                return
            }
            if (!this.place) {
                this.$message.error('请输入出现地点')
                return
            }
            if (!this.visitHospital) {
                this.$message.error('请输入就诊医院')
                return
            }
            if (!this.after) {
                this.$message.error('请输入详细事故经过')
                return
            }
            if (!this.phone) {
                this.$message.error('请输入报案人手机号')
                return
            }
            // 就诊医院  无 严重伤情(1:是,2:不是)
            let detailArea = this.area.join('') + this.place
            const result = await createInsureCase({
                idCardNo: this.idCardNo, // 出险人身份证号码
                accidentDetails: this.after, // 案件经过
                accidentType: this.accidentType,
                outDangerDate: this.date, // 出险日期
                outDangerPhone: this.outDangerPhone, // 出险人手机号
                outDangerPlace: detailArea,
                outDangerUserId: this.userId, // 出险人id
                outDangerUserName: userInfo[0].userName, // 出险人姓名
                params: {
                    photos: this.fileList // 附件
                },
                hurtStatus: this.hurtStatus,
                visitHospital: this.visitHospital,
                reportPhone: this.phone, // 报案人手机号
                recordId: this.outDangerUserId
            })
            console.log(result, 'result')
            await this.$message.success('提交成功')
            await this.$router.push({
                path: '/insure-team-report'
            })
        }
    }
})
</script>

<style lang="stylus" scoped>
.block
    min-height 694px
.block-box
    width 800px
    margin 0 auto
    padding 72px
    .row
        margin-top 32px
        .name
            width 290px
            color #202536
            font-size 16px
            font-weight 700
.row-alone
    display flex
    align-items center
    justify-content space-between
.search-type
    width 100% !important
.upload-box
    display flex
    align-items baseline
.upload-introduce
    margin-left 16px
    color #1989FA
</style>
